<template>
  <header>
    <div class="l-content">
      <el-button plain icon="el-icon-menu" size="mini" @click="handleMenu">
      </el-button>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">
          {{item.lable}}
          </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown trigger="click" szie="mini" @command="handleCommand">
        <!-- <div class="user"> -->
          <img class="user" :src="jpg" alt="">
        <!-- </div> -->
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item command="">个人中心</el-dropdown-item>
            <el-dropdown-item command="/login">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>
<script>
import { mapState} from "vuex"
export default {
  name:"CommonHeader",
  data(){
    return{
      jpg:require("../assets/admin.jpg")
    }
  },
  methods:{
    handleMenu(){
      this.$store.commit('collapseMenu')
    },
    handleCommand(command) {
        if(command=="/login"){
          this.$store.commit("changelogin",false)
          this.$router.push(command)
          this.$message({
            showClose: true,
            message: '退出成功',
            type: 'success',
            duration:1500
          });
        }
        
      }

  },
  computed:{
    ...mapState({
      tags:state=>state.tab.tabsList
    })
  }
}
</script>
<style lang="less" scoped>
header{
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}
.l-content{
  display: flex;
  align-items: center;
  .el-button{
    margin-right: 20px;
  }
}
.r-content{
  .user{
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    background-color: #fff;
  }
}
</style>
